<template>
  <div class="tac">
    <div class="tac__top">
      <div class="tac__top__item" @click="replyClick">
        <img src="../assets/images/icons/icon_comment_normal.png" class="tac__top__item__img" />
        回复
      </div>
      <div class="tac__top__item" style="margin-right:15px" @click="isThumbs = !isThumbs">
        <img :src="isThumbs ? thumbsClickPng : thumbsNormalPng" class="tac__top__item__img" />
        {{ tags }}
      </div>
    </div>
  </div>
</template>
<script>
// 评论与点赞组件
import Comment from "./Comment.vue";
export default {
  name: "ThumbAndComment",
  props: {
    tags: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleThumbsClick() {
      this.isThumbs = !this.isThumbs;
      this.$emit("thumbClick", this.isThumbs);
    },
    replyClick() {
      this.$emit("replyClick");
    }
  },
  components: {
    Comment
  },
  data() {
    return {
      // 是否点赞
      isThumbs: false,
      //未点赞图片
      thumbsNormalPng: require("../assets/images/icons/icon_thumbs_up_normal.png"),
      //点赞图片
      thumbsClickPng: require("../assets/images/icons/icon_thumbs_up_pressed.png")
    };
  }
};
</script>
<style lang="scss" scoped>
.tac {
  .tac__top {
    display: flex;
    .tac__top__item {
      display: flex;
      align-items: center;
      margin-right: 24px;
      opacity: 0.6;
      cursor: pointer;
      &__img {
        margin-right: 5px;
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>
